<template>
  <footer class="myfooter clear">
    <section :class="{'isactive':activePage=='0'}">
      <router-link to="/">
        <p class="icon iconfont">&#xe604;</p><p>首页</p>
      </router-link>
    </section>
    <section :class="{'isactive':activePage=='1'}">
      <router-link to="/finance/list">
        <p class="icon iconfont">&#xe683;</p><p>我要投资</p>
      </router-link>
    </section>
    <section :class="{'isactive':activePage=='2'}">
      <router-link to="/iborrow/list">
        <p class="icon iconfont">&#xe61b;</p><p>我要借款</p>
      </router-link>
    </section>
    <section :class="{'isactive':activePage=='3'}">
      <router-link to="/riches/list">
        <p class="icon iconfont">&#xe639;</p><p>更多</p>
      </router-link>
    </section>
  </footer>
</template>

<script>
export default {
  name: 'footerComponent',
  props:{
    activePage:String
  } 
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.myfooter {
  width:100%;
  font-size: 90%;
  height: 3rem;
  background:#fff;
  position:fixed;
  bottom:0;
  left:0;  
  border-top: 1px solid #ddd;
  section {
    width: 25%;
    height:100%;
    float:left;
    text-align:center;
    background:#fff;
    border-right:1px solid #ddd;
    padding: .2rem 0;
    a{
      p {
        font-size: 85%;
        margin-top:2px;
      }
      p.iconfont {
        font-size: 140%;
        margin-top:0;
      }
    }
    
  }
  section:last-child {
    border-right:none;    
  }
  section.isactive {
    p {
      color:#f30007;
    }
  }
}
</style>
